<template>
  <view class="contract_item_box">
    <view @click="emit('onClick')">
      <!-- 合同标题内容 -->
      <binary-layout>
        <template #left>
          <view class="strong">{{ props.data.houseNumber }}</view>
        </template>
      </binary-layout>

      <!-- 押金、时间 -->
      <view class="cycle">
        <binary-layout :middle-text="props.data.contractualNumber">
          <template #left>
            <view class="item">合同编号</view>
          </template>
        </binary-layout>
        <binary-layout
          :middle-text="`${format.priceHandler(props.data.deposit, '元')}`"
        >
          <template #left>
            <view class="item">房屋押金</view>
          </template>
        </binary-layout>
        <binary-layout
          :middle-text="`${format.priceHandler(props.data.houseRent, '元/月')}`"
        >
          <template #left>
            <view class="item">每月租金</view>
          </template>
        </binary-layout>
        <binary-layout
          :middle-text="`${props.data.startTime} 至 ${props.data.endTime}`"
        >
          <template #left>
            <view class="item">合同租期</view>
          </template>
        </binary-layout>
      </view>
    </view>

    <!-- 其他操作 -->
    <view class="other_choose">
      <view class="state">
        {{ getEnumValue(props.data.contractualState) }}
      </view>
      <view
        v-if="isValid"
        class="lease_exchange stateBth"
        @click="leaseExchange"
      >
        申请换租
      </view>
      <view
        v-if="isValid"
        class="surrender_lease stateBth"
        @click="surrenderLease"
      >
        申请退租
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import binaryLayout from '@/components/layout/binary_layout/binary-layout.vue'
import type { PageContract } from '@/config/data/data'
import { computed, type PropType } from 'vue'
import format from '@/util/format'
import {
  ContractStateEnum,
  checkStateEnum,
  getEnumValue,
} from '@/config/enum/enum'

//接受父组件参数
const props = defineProps({
  data: {
    type: Object as PropType<PageContract>,
    default: {},
  },
})

//提交父组件事件
const emit = defineEmits<{
  /**
   * 点击事件
   */
  (e: 'onClick'): void
}>()

//是否有效合同
const isValid = computed(() => {
  return checkStateEnum(props.data.contractualState, ContractStateEnum.VALID)
})

/**
 * 申请换租
 */
const leaseExchange = () => {}

/**
 * 申请退租
 */
const surrenderLease = () => {}
</script>

<style scoped lang="scss">
.contract_item_box {
  padding: 0 0 20rpx;
  background-color: $uni-bg-color;
  margin-bottom: 30rpx;
  letter-spacing: 0;
  font-size: 30rpx;
  border-radius: 10rpx;

  .cycle {
    padding: 8rpx 18rpx;
    letter-spacing: 0;
    background-color: #fbda8d22;
    border-radius: 10rpx;
  }
  .item {
    font-size: 28rpx;
    width: 140rpx;
  }
  .strong {
    padding: 8rpx 14rpx;
    font-weight: 600;
    font-size: 34rpx;
  }

  .price {
    color: #fbb719;
    font-weight: 600;
  }

  .stateBth {
    padding: 8rpx 15rpx;
    border-radius: 10rpx;
  }

  .other_choose {
    padding: 8rpx 18rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10rpx;

    .lease_exchange {
      margin-left: auto;
      margin-right: 30rpx;
      color: #fbb719;
      background-color: #fbecc768;
    }

    .surrender_lease {
      color: #fff;
      background-color: #fbb719;
    }
  }
  .state {
    color: #fbb719;
  }
}
</style>
